<template>
	<view class="indexs">
		<view class="header header_lan" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img22.png'" mode="widthFix"></image></view>
					<view class="index_wenben baise">{{ $t('page_dairuku_xgxx.modify_information') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 120rpx;'">
			<view class="dairuku_xgxx">
				<view class="dairuku_xgxx_item1">
					<view class="dairuku_xgxx_item1_title">{{ $t('page_dairuku_xgxx.package_information') }}</view>
					<view class="dairuku_xgxx_item1_list">
						<view class="dairuku_xgxx_item1_cont">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img26.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.courier_name') }}</text>
							</view>
							<picker @change="bindKuaidiChange" :value="index" :range="kuaidirray">
								<view class="dairuku_top_r">
									<text>{{ indexkd == null ? arrlist.express_name : kuaidirray[indexkd] }}</text>
									<image :src="imgUrl + '/dzx_img25.png'"></image>
								</view>
							</picker>
						</view>
						<view class="dairuku_xgxx_item1_cont">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img27.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.parcel_no') }}</text>
							</view>
							<view class="dairuku_top_r"><input type="text" :value="baoguodanhao" @input="baoguodanhaoFun" /></view>
						</view>
						<view class="dairuku_xgxx_item1_cont" @tap="guojiatz">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img23.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.sending_country') }}</text>
							</view>
							<view class="dairuku_top_r">
								<text>{{ guojiaid == '' ? arrlist.country.title : guojianame }}</text>
								<image :src="imgUrl + '/dzx_img25.png'"></image>
							</view>
						</view>
						<view class="dairuku_xgxx_item1_cont">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img24.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.consolidation_warehouse') }}</text>
							</view>
							<picker @change="bindPickerChange" :value="index" :range="cangkuarray">
								<view class="dairuku_top_r">
									<text>{{ index == null ? arrlist.storage.shop_name : cangkuarray[index] }}</text>
									<image :src="imgUrl + '/dzx_img25.png'"></image>
								</view>
							</picker>
						</view>
					</view>
				</view>

				<view class="dairuku_xgxx_item1">
					<view class="dairuku_xgxx_item1_title">{{ $t('page_dairuku_xgxx.goods_info') }}</view>
					<view class="dairuku_xgxx_item1_list">
						<view class="baoguo_item2_cont2" v-if="userclient.yubao.is_goodslist==1">
							<view class="baoguo_item2_cont_l">
								<image :src="imgUrl + '/dzx_img30.png'"></image>
								<text>{{ $t('page_baoguoyg.goodsinformation') }}</text>
							</view>
							<view class="baoguo_item2_cont_txttb" >
								<table>
									<th>{{$t('page_other.品名')}}</th>
									<th>{{$t('page_other.单价')}}</th>
									<th>{{$t('page_other.数量')}}</th>
									<th>{{$t('page_other.操作')}}</th>
								</table>
								<view  class="yunfeigusuan_item2_list" v-for="(goods,index) in goodslist">
									<view class="yunfeigusuan_item2_cont">
										<input type="text" :placeholder="$t('page_baoguoyg.pinming')" :data-index="index" :value="goods.goods_name" @input="pinmingFun"/>
									</view>
									<view class="yunfeigusuan_item2_cont">
										<input type="digit" :placeholder="$t('page_baoguoyg.danjia')" :data-index="index" :value="goods.one_price" @input="danjiaFun"/>
									</view>
									<view class="yunfeigusuan_item2_cont">
										<input type="digit" :placeholder="$t('page_baoguoyg.shuliang')" :data-index="index" :value="goods.product_num" @input="shuliangFun"/>
									</view>
									<view class="yunfeigusuan_item2_cont">
										<view style="margin-right: 5px;">
											<button @tap="deleteData(index)" class="addpack">-</button>
										</view>
										<view><button @tap="getData" class="addpack">+</button></view>
									</view>
								</view>
							</view>
						</view>
						<view class="dairuku_xgxx_item1_cont" @tap="shangpinpinlei">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img28.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.commodity_category') }}</text>
							</view>
							<view class="dairuku_top_r">
								<text>{{ shangpinids == '' ? arrlist.shop : shangpinnames }}</text>
								<image :src="imgUrl + '/dzx_img25.png'"></image>
							</view>
						</view>
						<view class="dairuku_xgxx_item1_cont">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img29.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.commodity_value') }}</text>
							</view>
							<view class="dairuku_top_r">
								<text>{{ price_mode.unit }}</text>
								<input type="text" style="width: 35%" placeholder="0.00" :value="shangpinjiazhi" @focus="onInput" @input="shangpinjiazhiFun" />
							</view>
						</view>
						<view class="baoguo_item2_cont2">
							<view class="dairuku_top_l">
								<image :src="imgUrl + '/dzx_img30.png'"></image>
								<text>{{ $t('page_dairuku_xgxx.commodity_remarks') }}</text>
							</view>
							<view class="baoguo_item2_cont_txt"><textarea :placeholder="$t('page_dairuku_xgxx.commodity_remarkstips')" @input="shangpinbeizhuFun" :value="shangpinbeizhu" name="" id="" cols="30" rows="10"></textarea></view>
						</view>
					</view>
				</view>
				<view class="baoguo_btns">
					<view class="baoguo_btns_posi">
						<view class="baoguo_btn" @tap="tijiao">{{ $t('page_dairuku_xgxx.edit_package') }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();

let request = require('../../../utils/require');

export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			guojiaid: '',
			guojianame:this.$t('page_other.选择国家'),
			cangkuarray: [],
			index: null,
			kuaidirray: [],
			indexkd: null,
			shangpinids: '',
			shangpinnames: this.$t('page_other.请选择商品品类'),
			baoguodanhao: '',
			price_mode: uni.getStorageSync('price_mode'),
			userclient: uni.getStorageSync('userclient'),
			//包裹单号
			shangpinjiazhi: '',

			//商品价值
			shangpinbeizhu: '',

			//商品备注
			//详情
			arrlist: {
				express_name: '',

				country: {
					title: ''
				},

				storage: {
					shop_name: ''
				},

				shop: ''
			},

			optionsid: '',
			kuaidilist: '',
			cangkuarr: '',
			goodslist: [{goods_name:'',one_price:'',product_num:''}],
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ 
	onLoad(options) {
		var that = this;
		that.optionsid = options.id
		that.dairuku_xq();
	},
	onShow() {
		var that = this;
		that.cangkulist();
		that.kuaidilistFun(); //返回国家id

		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1];

		if (currPage.guojiaid) {
			this.guojiaid = currPage.guojiaid
			this.guojianame = currPage.guojianame
		}

		if (currPage.ids) {
			this.shangpinids = currPage.ids
			this.shangpinnames = currPage.names
		}
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		deleteData(e){
			this.goodslist.splice(e,1);
		},
		async getData() {
		  try {
			var a = [{goods_name:'',one_price:'',product_num:''}];
			console.log(this.goodslist,6600);
			const res = this.goodslist.concat(a);
			console.log(a,7700);
			console.log(res,8800);
			this.goodslist = res;
		  } catch (err) {
			console.error(err)
		  }
		},
		pinmingFun(e){
			var index = e.currentTarget.dataset.index;
			this.goodslist[index].goods_name = e.detail.value;
			console.log(this.goodslist,990099);
		},
		danjiaFun(e){
			var index = e.currentTarget.dataset.index;
			this.goodslist[index].one_price = e.detail.value;
			
			this.shangpinjiazhi = 0;
			if(this.goodslist.length==0){
				this.shangpinjiazhi = this.goodslist[index].one_price * this.goodslist[index].product_num
			}else{
				for (var i = 0; i < this.goodslist.length; i++) {
					this.shangpinjiazhi += this.goodslist[i].one_price * this.goodslist[i].product_num
				}
			}
		},
		shuliangFun(e){
			var index = e.currentTarget.dataset.index;
			this.goodslist[index].product_num = e.detail.value;
			this.shangpinjiazhi = 0;
			console.log(this.goodslist.length,897)
			if(this.goodslist.length==0){
				this.shangpinjiazhi = this.goodslist[index].one_price * this.goodslist[index].product_num
			}else{
				for (var i = 0; i < this.goodslist.length; i++) {
					this.shangpinjiazhi += this.goodslist[i].one_price * this.goodslist[i].product_num
				}
			}
		},
		servicesetting(){
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.post(`index.php?s=/api/page/service&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					that.userclient = res.data.data.userclient
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
				console.log(that.switchFunlist, 777);
			});
		},
		onInput(e) {
			if (this.shangpinjiazhi == '0.00') {
				console.log(333);
				this.shangpinjiazhi= ' '
			}
		},

		dairuku_xq() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token'),
				id: that.optionsid,
				method: 'edit'
			};
			request.post(`index.php?s=/api/package/details&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					that.arrlist= res.data.data
					if(res.data.data.item.length >0){
						that.goodslist = res.data.data.item 
					}
					that.shangpinjiazhi= res.data.data.price
					that.shangpinbeizhu= res.data.data.remark
					that.baoguodanhao= res.data.data.express_num
					console.log(res, 're??');
				}
			});
		},

		//提交预报
		tijiao() {
			var that = this;
			var guojiaid = '';
			var kuaidiid = '';
			var cangkuid = '';
			var shangpin = '';
			console.log(this.goods,7656);
			if (that.guojiaid == '') {
				if(that.arrlist.country ==null){
					uni.showToast({
						title:that.$t('page_other.请选择国家')
					})
				}
				guojiaid = that.arrlist.country.id;
			} else {
				guojiaid = that.guojiaid;
			}

			if (that.indexkd == null) {
				if(that.arrlist.express_id ==0){
					uni.showToast({
						title:"请选择快递"
					})
				}
				kuaidiid = that.arrlist.express_id;
			} else {
				kuaidiid = that.kuaidilist[that.indexkd].express_id;
			}

			if (that.index == null) {
				cangkuid = that.arrlist.storage.shop_id;
			} else {
				cangkuid = that.cangkuarr[that.index].shop_id;
			}

			if (that.shangpinids == '') {
				shangpin = that.arrlist.shop_ids;
			} else {
				shangpin = that.shangpinids;
			}
			console.log(that.baoguodanhao, 77777);
			var data = {
				country_id: guojiaid,
				//国家id
				express_id: kuaidiid,
				//快递id
				storage_id: cangkuid,
				//仓库id
				express_sn: that.baoguodanhao,
				//包裹单号
				class_ids: shangpin,
				//物品品类
				price: that.shangpinjiazhi,
				//物品价值
				remark: that.shangpinbeizhu,
				//商品备注
				token: uni.getStorageSync('token'),
				//token用户登录凭证
				id: that.optionsid ,//id
				goodslist:that.goodslist,
			};
			request.post(`index.php?s=/api/package/packageUpdate&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					uni.showToast({
						title: res.data.data
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 0
						});
					}, 1000);
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: 'none'
					});
				}
			});
		},

		//商品备注
		shangpinbeizhuFun(e) {
			this.shangpinbeizhu= e.detail.value
		},

		//商品价值
		shangpinjiazhiFun(e) {
			this.shangpinjiazhi= e.detail.value
		},

		//包裹单号
		baoguodanhaoFun(e) {
			this.baoguodanhao= e.detail.value
		},

		//商品品类
		shangpinpinlei() {
			uni.navigateTo({
				url: '/pages/indexs/shangpinpinlei/shangpinpinlei'
			});
		},

		//选择国家
		guojiatz() {
			uni.navigateTo({
				url: '/pages/indexs/baoguoyg_guojia/baoguoyg_guojia'
			});
		},

		//快递列表
		kuaidilistFun() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.get(`index.php?s=/api/package/express&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var arrlist = [];

					for (var i = 0; i < res.data.data.length; i++) {
						arrlist.push(res.data.data[i].express_name);
					}

					this.kuaidirray= arrlist
					this.kuaidilist= res.data.data
				}
			});
		},

		//仓库列表
		cangkulist() {
			var that = this;
			var data = {
				token: uni.getStorageSync('token')
			};
			request.get(`index.php?s=/api/package/storage&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					var arrlist = [];

					for (var i = 0; i < res.data.data.length; i++) {
						arrlist.push(res.data.data[i].shop_name);
					}
					this.cangkuarray= arrlist
					this.cangkuarr= res.data.data
				}
			});
		},

		//选择快递
		bindKuaidiChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.indexkd= e.detail.value
		},

		//选择仓库
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.detail.value);
			this.index= e.detail.value
		},

		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './dairuku_xgxx.css';
</style>
